<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title th:text="${title}"></title>
    <link rel="icon" href="/img/favicon.ico">
    <style>
        .msg {
            padding: 15px;
            margin-bottom: 20px;
            border-radius: 4px;
            color: #31708f;
            background-color: #d9edf7;
            border: 1px solid #bce8f1;
        }
    </style>
</head>
<body>
<div th:include="header.html"></div>
    <div class="am-g">
        <div class="am-u-lg-8 am-u-lg-offset-2">
            <br>
            <div class="msg" th:class="${msg}? 'show msg' : 'hide'" th:text="${msg}"></div>
            <article class="am-article">
                <div class="am-article-hd">
                    <h1 class="am-article-title" th:text="${title}"></h1>
                    <p class="am-article-meta" th:text="${authorUsername}+' '+${lastModified}"></p>
                </div>
                <div id="content" class="am-article-bd"></div>
                <input id="content_text" type="hidden" th:value="${content}">
            </article>
            <section>
                <ul class="am-comments-list am-comments-list-flip" th:each="comment : ${comments}">
                    <li class="am-comment">
                        <a href="#link-to-user-home">
                            <img th:src="${comment.getUserPic()}" alt="" class="am-comment-avatar" width="48"
                                 height="48"/>
                        </a>

                        <div class="am-comment-main">
                            <header class="am-comment-hd">
                                <!--<h3 class="am-comment-title">评论标题</h3>-->
                                <div class="am-comment-meta">
                                    <a th:text="${comment.getUsername()}" href="#link-to-user"
                                       class="am-comment-author"></a>
                                    评论于
                                    <time datetime="2013-07-27T04:54:29-07:00" title="2013年7月27日 下午7:54 格林尼治标准时间+0800"
                                          th:text="${comment.getLastModified()}"></time>
                                </div>
                            </header>

                            <div th:text="${comment.getComment()}" class="am-comment-bd">
                            </div>
                        </div>
                    </li>
                </ul>
            </section>
            <br>
            <br>
            <form action="/comment" method="post" id="post_comment">
                <h2>发表评论</h2>
                <textarea type="text" name="comment_text" id="comment_text" class="" rows="10" cols="80"
                          form="post_comment"></textarea>
                <br>
                <br>
                <input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}"/>
                <input type="hidden" name="article_id" th:value="${articleId}" id="article_id">
                <input type="submit" class="am-btn am-btn-default" value="发表评论"/>
            </form>


        </div>
    </div>
<div th:include="footer.html"></div>

<script src="/js/jquery.min.js" type="text/javascript"></script>
<script src="/js/amazeui.min.js" type="text/javascript"></script>
<script>
    var text = document.getElementById("content_text").value;
    $('#content').html(text)
</script>
<link rel="stylesheet" href="/css/amazeui.min.css"/>
</body>
</html>